<script lang="ts">
  import { Tab, Tabs } from "@component/tab/index";
  import { Breadcrumbs } from "@component/breadcrumb";
  import { currentDataset$ } from "@store/entity/dataset";
  import { user$ } from "@store/entity/User";
  import {
    getDatasetEntrySubscribe,
    DatasetEntryFactory,
    type DatasetEntry,
    EntryType,
  } from "@store/entity/dataset/entry";
  import { listDatasetEntries, createDatasetEntry, updateDatasetEntry, deleteDatasetEntry } from "@service/dataset/entry";
  import { DataTable, convToDataSource } from "@component/table";
  import type { PageData } from "./$types";
  export let data: PageData;
  let pageSize = 10
  let activeTab = 1;
  $: entriesUrl = data.baseUrl + "/entries";
  $: parent = data.parent
  $: datasetEntries$ = getDatasetEntrySubscribe($currentDataset$.code);
  $: datasetEntriesDataSource = convToDataSource(
    $datasetEntries$?.rows,
    $datasetEntries$?.total,
    DatasetEntryFactory($currentDataset$.id, EntryType.File, parent),
    pageSize
  );
  $: inlineOp = $currentDataset$.user_id === $user$.id
  $: editable = inlineOp;
  $: inlineOpAddGroup = inlineOp ? {
    [EntryType.File]: {text:"文件", handler: DatasetEntryFactory($currentDataset$.id, EntryType.File, parent)},
    [EntryType.Directory]: {text:"目录", handler: DatasetEntryFactory($currentDataset$.id, EntryType.Directory, parent)},
  } : undefined;
  
  $: {
    console.log("parent:", parent);
    listDatasetEntries($currentDataset$.code, { parent, page_no: 1, page_size: pageSize }, false);
    console.log("data=>", data);
  }

  function handleTableRowCreated(e) {
    const { row } = e.detail;
    console.log("client created row:", row);
    createDatasetEntry($currentDataset$.code, row)
  }
  function handleTableRowUpdated(e) {
    const { row } = e.detail;
    console.log("client updated row:", row);
    updateDatasetEntry($currentDataset$.code, row)
  }
  function handleTableRowRemoved(e) {
    const { row } = e.detail;
    console.log("client removed row:", row);
    deleteDatasetEntry($currentDataset$.code, row)
  }
  function handleTableLoadMore(e) {
    console.log("load more...");
    listDatasetEntries($currentDataset$.code, { parent, ...e.detail }, true);
  }
  
</script>

<Tabs prerender={true} active={activeTab}>
  <Tab label="数据集介绍卡" href={data.baseUrl + "/overview"}>
  </Tab>
  <Tab label="数据集文件" href={entriesUrl}>
    <div class="p-2 flex-container flex-col">
      <div class="w-full h-14 pt-2 pl-4">
        <Breadcrumbs data={parent} rootLabel="顶层" baseHref={entriesUrl} let:item>
          <!-- <span >{item.label}</span>
          <span slot="sep">&gt;</span> -->
        </Breadcrumbs>
      </div>
      <DataTable
        cols={data.dataEntriesCols}
        ds={datasetEntriesDataSource}
        inlineOp={inlineOp}
        {inlineOpAddGroup}
        editable={editable}
        checkable={false}
        on:table-row-created={handleTableRowCreated}
        on:table-row-updated={handleTableRowUpdated}
        on:table-row-removed={handleTableRowRemoved}
        on:table-load-more={handleTableLoadMore}
      />
    </div>
  </Tab>
</Tabs>